import React, { useEffect, useState } from 'react'
import { Button, Modal, Input, Select, Tree, Table, Tag, Popconfirm, Drawer } from 'antd'
import { CloseCircleOutlined,  EditOutlined, UsergroupAddOutlined } from '@ant-design/icons'

import menus from '../../routers';
import { useTreeData } from '../../utils/hooks';

import { addAdminFn, adminUpdateFn, delAdminFn, getAdminListFn } from '../../api/userLogin';
import { useSelector } from 'react-redux';

export default function Admin() {

    // 获取管理员数据
    const userInfo =  useSelector(state => state.user.userInfo)

    const menuList = useTreeData(menus)

    // ---------------------- 管理员列表 -----------------------

    const [current, setCurrent] = useState(1)
    const [adminList, setAdminList] = useState([])
    

    useEffect(() => {
        getAdminListFn().then(res => {
            // console.log(res);
            setAdminList(res.data)
        })
    }, [])

     // table 列配置
    const columns = [
        {
            title: '序号',
            render(t, row, index) {
                return <span>{(current - 1) * 8 + index + 1}</span>
            }
        },
        {
            title: '管理员名称',
            dataIndex: 'adminname',

        },
        {
            title: '管理员类型',
            dataIndex: 'role',
             render(t) {
                return <>
                    {t == 1 ? <Tag color='green'>普通管理员</Tag> : <Tag color='red'>超级管理员</Tag>}
                </>
            }
        },
        {
            title: '操作',
             render(t,  r , index) {
                return <>
                    <Button disabled={userInfo.role == 1 ? true : false} icon={<EditOutlined />} color='primary' variant="filled"
                        onClick={() => { showDrawer(r) }}>
                        编辑
                    </Button>

                    <Popconfirm
                        title="温馨提示"
                        // description={`您确定要删除 $您确定要删除 ${r.adminname} 吗 吗？`}
                        description={<span>您确定要删除 <span style={{color:'red'}}>{r.adminname}</span> 吗</span>}
                        onConfirm={() => { delClick(r.adminid) }}
                        okText="确定"
                        cancelText="取消"
                    >
                        <Button disabled={userInfo.role == 1 ? true : false} icon={<CloseCircleOutlined />} color='danger' variant="filled">删除</Button>
                    </Popconfirm>

                </>
            }
        },
    ]

    // ---------------------- 管理员列表 -----------------------

    // ---------------------- 管理员删除 -----------------------
    function delClick(adminid) {
        // console.log(adminid);

        delAdminFn({ adminid }).then(res => {
            console.log(res);
            // 重新获取管理员列表即可
            getAdminListFn().then(res => {
                console.log(res);
                setAdminList(res.data)
            })
        })

    }
    // ---------------------- 管理员删除 -----------------------


    // ----------------- 添加管理员 ---------------------


    // 是否显示对话框添加管理员
    const [isModalOpen, setIsModalOpen] = useState(false);
    // 定义表单数据
    const [adminname, setAdminname] = useState('');
    const [password, setPassword] = useState('');
    const [role, setRole] = useState(1);
    const [checkedKeys, setCheckedKeys] = useState([]);

    // 显示的点击事件
    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleOk = () => {

        // 收集数据
        // console.log(adminname, password, role, checkedKeys);

        addAdminFn({
            adminname, password, role, checkedKeys
        }).then(res => {

            // 刷新当前页面
            window.location.reload()

            console.log(res);
            // getAdminListFn().then(res => {
            //     console.log(res);
            //     setAdminList(res.data)
            // })

            // setAdminname('')
            // setPassword('')
            // setRole(1)
            // setCheckedKeys([])

        })

        setIsModalOpen(false);
    };
    // 取消的点击事件
    const handleCancel = () => {
        setIsModalOpen(false);
    };

    // ----------------- 添加管理员 ---------------------


    // ----------------- 编辑管理员 ---------------------
    // 是否显示抽屉
    const [isDrawerOpen, setIsDrawerOpen] = useState(false);

    const showDrawer = (r) => { 

        setAdminname(r.adminname)
        setPassword(r.password)
        setRole(r.role)
        setCheckedKeys(r.checkedKeys)

        setIsDrawerOpen(true)
    };

    const onClose = () => { 
       setIsDrawerOpen(false)
       setAdminname('')
       setPassword('')
       setRole(1)
       setCheckedKeys([])
    };


    const updateClick = () => { 
        //  关闭抽屉
        setIsDrawerOpen(false)

        // 更新用户数据
        adminUpdateFn({
            adminname,
            password,
            role,
            checkedKeys,
        }).then(res => {
            // console.log(res);
            // 重新获取列表数据
            getAdminListFn().then(res => {
                setAdminList(res.data)
            })
        })
    };

    // ----------------- 编辑管理员 ---------------------


    return (
        <div>
            <Button disabled={userInfo.role == 1 ? true : false} type="primary" icon={<UsergroupAddOutlined />} onClick={showModal}> 添加 </Button>

             <Table
                dataSource={adminList}
                columns={columns}
                rowKey={'adminid'}
                pagination={{
                    current,
                    pageSize: 8,
                    onChange(page) {
                        setCurrent(page)
                    }
                }}
            />

            {/*  ----------------- 添加管理员 --------------------- */}
           <Modal
                title="添加管理员"
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
                cancelText='取消添加'
                okText='确定添加'
                width='600px'
            >
                <Input value={adminname}  placeholder='请输入管理员名称'
                    onChange={e => { setAdminname(e.target.value) }}
                />
                <Input.Password value={password}  style={{ margin: '10px 0' }} placeholder='请输入管理员密码' 
                    onChange={e => { setPassword(e.target.value) }}
                />
                <Select value={role}  placeholder='请选择管理员类型' style={{ width: '100%' }} 
                    options={[
                        { value: 1, label: <span>普通管理员</span> }, 
                        { value: 2, label: <span>超级管理员</span> }
                    ]} 
                    onChange={e => { setRole(e) }}
                    />


            
                <Tree
                    fieldNames={{ title: 'label' }}
                    checkable={true}
                    treeData={menuList}
                    defaultExpandAll={true}
                    checkedKeys={checkedKeys}
                    onCheck={(e)=>{
                        //  获取所有选中的内容
                        setCheckedKeys(e)
                    }}
                />

            </Modal>
            {/*  ----------------- 添加管理员 --------------------- */}


            {/*  ----------------- 编辑管理员 --------------------- */}
            <Drawer
                title="编辑管理员"
                onClose={onClose}
                open={isDrawerOpen}
                width='600px'
            >


                <Input disabled value={adminname}  placeholder='请输入管理员名称'
                    onChange={e => { setAdminname(e.target.value) }}
                />
                <Input.Password disabled value={password}  style={{ margin: '10px 0' }} placeholder='请输入管理员密码' 
                    onChange={e => { setPassword(e.target.value) }}
                />
                <Select value={role}  placeholder='请选择管理员类型' style={{ width: '100%' }} 
                    options={[
                        { value: 1, label: <span>普通管理员</span> }, 
                        { value: 2, label: <span>超级管理员</span> }
                    ]} 
                    onChange={e => { setRole(e) }}
                />


            
                <Tree
                    fieldNames={{ title: 'label' }}
                    checkable={true}
                    treeData={menuList}
                    defaultExpandAll={true}
                    checkedKeys={checkedKeys}
                    onCheck={(e)=>{
                        //  获取所有选中的内容
                        setCheckedKeys(e)
                    }}
                />

                <Button onClick={updateClick}>确认修改</Button>

            </Drawer>
        </div>
    )
}
